<template>
  <div class="">
    <iframe
      id="bpmn-process"
      ref="iframe"
      v-if="data.showGovernProcess"
      :src="caseId ? src + caseId : ''"
      :frameborder="caseId ? '0' : '1'"
      @load="loaded"
    ></iframe>
    <!-- http://bpm-stage.ectest.intra.xiaojukeji.com/trace/{processInstanceId} -->
    <!-- <div class=""></div> -->
    <!-- <iframe
      id="bpmn-process"
      ref="iframe"
      v-if="data.showBpm"
      :src="`http://bpm-stage.ectest.intra.xiaojukeji.com/trace/51eb23e4-d9d5-11ee-86ac-729cdc1b920a`"
    ></iframe> -->
    <bpmFlow v-if="data.showBpm" :data="data.processData"> </bpmFlow>
    <div class="sec-title">操作日志</div>
    <div class="drawer-log">
      <el-timeline v-if="operationLog.length !== 0">
        <el-timeline-item
          v-for="(item, index) in operationLog"
          :key="index"
          :timestamp="item.user + ' ' + item.createTime"
          :color="nodeColor(item.operate)"
        >
          {{ item.data }}
        </el-timeline-item>
      </el-timeline>
      <div v-else class="none-log">暂无日志</div>
    </div>
    <!-- <el-drawer :with-header="false" :visible.sync="drawer" v-loading="drawerLoading" element-loading-text="正在加载...">
    </el-drawer> -->
  </div>
</template>

<script>
let { NODE_ENV } = process.env;
import { jointDomain } from "@/utils/config";
import { governSensitivityWork, getWorkOrderLog } from "api/taskCenterApi";
import bpmFlow from "@/components/bpmn";
export default {
  name: "",
  components: { bpmFlow },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      showBpm: false,
      srcH5: "",
      isDisposalLoading: false,
      loadIframe: true,
      drawerLoading: false,
      drawer: false,
      operationLog: [],
      greenNode: ["创建工单", "完成工单"],
      redNode: ["关闭工单"],
      blueNode: ["转交", "申诉", "申诉结果", "验收结果"],
      src: jointDomain[NODE_ENV] + "/disposal/process?caseId=",
    };
  },
  computed: {
    caseId() {
      return this.$route.query.caseId || this.data.caseid;
    },
    processId() {
      return this.$route.query.processId;
    },
    isDisposal() {
      let { status } = this.$route.params;
      return status === "done" ? false : true;
    },
  },
  created() {
    // console.log("[ data.processData.bpmId ] >", this.data.processData.bpmId);
    this.openOperationLog();
  },
  methods: {
    loaded() {
      let oldAction = "";
      window.addEventListener(
        "message",
        (data) => {
          let action = data.data?.res?.action;
          if (action && action != oldAction) {
            oldAction = action;
            this.dialogVisible = false;
            let loading = this.openLoading();
            setTimeout(() => {
              loading.close();
              this.loadIframe = false;
              this.$nextTick(() => {
                this.loadIframe = true;
              });
            }, 5000);
          }
          console.log("[ data ] >", data);
        },
        false,
      );
    },
    handleDisposal() {
      this.isDisposalLoading = true;
      governSensitivityWork({ processId: this.processId })
        .then((res) => {
          this.isDisposalLoading = false;
          this.dialogVisible = true;
          const protocol = window.location.protocol;
          const { data } = res;
          this.srcH5 = data.replace("http:", protocol);
        })
        .catch(() => {
          this.isDisposalLoading = false;
        });
    },
    nodeColor(data) {
      if (this.greenNode.includes(data)) {
        return "#0bbd87";
      } else if (this.redNode.includes(data)) {
        return "#FF0000";
      } else if (this.blueNode.includes(data)) {
        return "#0000FF";
      } else {
        return "";
      }
    },
    openOperationLog() {
      this.drawer = true;
      this.drawerLoading = true;
      getWorkOrderLog({ processId: this.processId })
        .then((res) => {
          const { data } = res;
          this.operationLog = data;
          this.drawerLoading = false;
        })
        .catch(() => {
          this.drawerLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.handle-button {
  margin: 10px 0;
  span {
    margin-right: 10px;
  }
}
#bpmn-process {
  width: 100%;
  height: 502px;
  background: #fff;
  border: 1px solid #99a6bd;
}
.log {
  float: right;
  padding-right: 20px;
  text-decoration: underline;
}
.drawer-log {
  margin: 30px 10px 0 10px;
}
.none-log {
  text-align: center;
  color: #909399;
}
</style>
